body{
  background-color: #4a4850;
}

.wrapper{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: rgb(242, 242, 245);
}
.container2{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #4a4850;
}
.container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #4a4850;
}


.div1 {
  font-size: 1.9rem;
  width: 700px;
  text-align: center;
  padding: 5px;
  background-color: rgb(242, 242, 245);
 text-shadow: -3px 3px 3px rgb(11, 11, 11), -1px 1px 1px rgb(16, 16, 16);
}

 .div1 h3{
    text-align: center;
    font-family: verdana;
    font-size: 1.5rem;
	color: #cc06cc;
}
.div1 p{ /*Page ya chant de louange, texte yenye iko juu ya mimbo*/
  font-size: 1rem;
	text-align: center;
	clear: both;
	color: rgb(210, 246, 240);
	text-shadow: -3px 1px 1px rgb(63, 29, 128), -1px 1px 1px black;
}
 .card{ /*card ya mimbo*/
    width: 355px;
     height: auto;
     background: #262627;
     padding: 3px;
     box-sizing: border-box;
     margin:10px;
     box-shadow: 3px 4px 4px -4px rgb(11, 37, 142);
	   margin-top: 5px;
     margin-left: -1px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.card li {
  text-align: left;
  font-size: 1rem;
	color: rgba(238, 247, 246, 0.885);
	text-shadow: -3px 3px 3px rgb(76, 78, 77), -1px 1px 1px rgb(149, 7, 7);
}

.card h4 {
  text-align: left;
  font-size: 1rem;
	color: rgba(36, 215, 207, 0.885);
	text-shadow: -3px 3px 3px rgb(17, 18, 18), -1px 1px 1px rgb(149, 7, 7);
}

.card1{ /*card ya chants de Lot*/
  width: 355px;
   height: 735px;
   background: #dbebf8;
   padding: 10px;
   box-sizing: border-box;
   margin:10px;
   box-shadow: 5px 6px 18px -4px rgb(19, 19, 19);
   margin-top: 5px;
   margin-left: -1px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.card2{ /*card ya chants de Abraham - les 4 premiers, issac*/
  width: 355px;
   height: 435px;
   background: #dbebf8;
   padding: 10px;
   box-sizing: border-box;
   margin:10px;
   box-shadow: 5px 6px 18px -4px rgb(6, 6, 6);
   margin-top: 5px;
   margin-left: -1px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.card3{ /*adimi labo*/
  width: 300px;
   height: 230px;
   background-image: url("simon1.png");
   padding: 10px;
   margin:10px;
   margin-top: 5px;
   margin-left: -1px;
}
.card3 h4 {
	font-size:15px;
	color: #f4f9f9;
	font-family: Bookman old style;
}
h4 {
	font-size:15px;
	color: #26067e;
	
}
.card4{ /*card ya mimbo*/
    width: 355px;
    height: auto;
    background: rgb(242, 242, 245);
    text-align: left;
    padding: 3px;
    box-sizing: border-box;
    margin:10px;
    border: solid 0.6px rgba(110, 103, 103, 0.322);
    box-shadow: 1px 2px 2px -4px rgb(11, 37, 142);
	margin-top: 5px;
    margin-left: -1px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 4px;
}
.card5 {
  /*carte ya ma audio comme fils et petit-fils etant audio que l'on ne peut pas embelir */
  width: 310px;
  height: 70px;
  background-color: rgb(242, 242, 245);
  padding: 5px;
  box-sizing: border-box;
  color: black;
  margin: 3px;
  box-shadow: 0px 2px 9px -4px #7b9494;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}
.card6{ /*card-parent ya ma selection*/
    width: 315px;
    height: auto;
    background: rgb(242, 242, 245);
    text-align: left;
    padding: 3px;
    box-sizing: border-box;
    margin:10px;
    border: solid 0.6px rgba(110, 103, 103, 0.322);
    box-shadow: 1px 2px 2px -4px rgb(11, 37, 142);
	margin-top: 5px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 4px;
}
audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}


.text--left     { text-align: left    !important; }
.text--center   { text-align: center  !important; }
.text--right    { text-align: right   !important; }
.text--justify  { text-align: justify !important; }

select {
   display: block;
   background: #767876;   
   border: solid 0.1px #c4f1f1;    
   width: 250px;
   height: 50px;
   margin: 10px;
   padding: 9px;
   font-size: 15px;
   font-family: Arial;
   font-weight: 500;
   border-radius: 3px 3px 3px 3px;
   box-shadow: 1px 1px 1px 1px #d6d4d4;
  }